<template>
  <el-tree :data="data" :props="defaultProps"
           highlight-current
           node-key="id"
           :default-expanded-keys="[routerId]"
           :current-node-key="routerId"
           :default-expand-all="false"
           :expand-on-click-node="false"
           check-on-click-node
           :indent="20"
           icon-class="el-icon-arrow-right"
           @node-click="handleNodeClick">
    <template  slot-scope="{ node, data }" >
      <div >
        <!--        <i class="el-icon-folder" v-if="data.children"></i>-->
        <!--        <i class="el-icon-tickets" v-else></i>-->
        <span>
          {{ data.label }}
        </span>
      </div>

    </template>
  </el-tree>

  </template>
<script>
import json from "@/../data.json"
console.log(json)
export default {
  computed:{
    routerId:that=>that.$route.name
  },
  data() {
    return {
      data:json[0].children,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      this.$router.push({
        name:data.id
      })
      console.log(data);
    },

  }
};
</script>
<style>
.el-tree{
  padding: 1rem 0;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background: rgba(31,41,55,.1);
  color:rgba(31,41,55,1) !important;
}
.dark .el-tree{
  background: rgba(0,0,0,.1);

  color: rgba(255,255,255,0.8);
}
.dark .el-tree-node__content:hover,
.el-tree-node:focus>.el-tree-node__content{
  background: rgba(0,0,0,.2);
  color: rgba(255,255,255,0.8);
}

.el-tree *{
  transition: background 200ms;
}
.dark .el-tree>.el-tree-node>.el-tree-node__content{
  font-weight: bold;
  padding: .2em 0;
  color: rgba(255,255,255,0.8);
  box-sizing: content-box;
}
.dark .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background: rgba(31,41,55,.1);
  color:rgba(110,231,183,1) !important;
}
.el-tree>.el-tree-node>.el-tree-node__content{
  font-weight: bold;
  padding: .2em 0;
  color: #000;
  box-sizing: content-box;
}
</style>